<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" >
    <link rel="stylesheet" href="/css/main.css" />
    <script src="/js/uikit.js"></script>
</head>

<body>

<div th:insert="~{common::#header}"></div>

<div class="uk-section uk-section-muted">
	<div class="uk-container">
		<div class="uk-child-width-1-2@m uk-grid-match- uk-grid-small" data-uk-grid>


			<div th:each="category:${categoryList}">
				<div class="uk-card uk-card uk-card-default uk-card-hover uk-card-body uk-inline uk-border-rounded">
					<a class="uk-position-cover" th:href="'/categoryArticle/detail?categoryId=' + ${category.id}"></a>
					<div class="uk-grid-small" data-uk-grid>
						<div class="uk-width-expand">
							<h3 class="uk-card-title uk-margin-remove uk-text-primary" th:text="${category.categoryName}"></h3>
							<p class="uk-text-muted uk-margin-remove" th:text="${category.categoryDesc}"></p>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>

<div class="uk-section uk-section-muted">
	<div class="uk-container uk-container-small" style="max-width: 1200px;">
		<h2 class="uk-text-center">为您推荐优质的文章</h2>
		<ul class="uk-margin-medium-top" data-uk-accordion="multiple: true">
			<li th:each="a:${articleList}">
				<a class="uk-accordion-title uk-box-shadow-hover-small" th:href="'/article/detail?articleId='+${a.id}" th:text="${a.articleName}"></a>
				<div class="uk-article-content uk-accordion-content link-primary">
					<p th:utext="${a.content}"></p>
				</div>
			</li>

		</ul>
	</div>
</div>

<div class="uk-section uk-section-muted">
	<div class="uk-container">
		<h2 class="uk-text-center">没有找到合适的答案？</h2>
		<p class="uk-text-muted uk-text-center uk-text-lead">或许您可以通过留言的方式向我们反馈，我们将在看到的第一时间给您回馈！</p>

		<div class="uk-margin-medium-top uk-text-center" 
			data-uk-scrollspy="cls: uk-animation-slide-bottom-medium; repeat: true">
			<a class="uk-button uk-button-primary uk-border-rounded" href="/contact">我要反馈</a>
		</div>
	</div>
</div>


<div th:insert="~{common::#footer}"></div>

<script src="/js/awesomplete.js"></script>
<script src="/js/custom.js"></script>


</body>

</html>